<template>
  <div class="home-view">
    <div>
      <TopView @openitem="openhomeitem" @topgoside="Topgoside"></TopView>
      <center-view id="PRODUCT1"></center-view>
      <about-view id="ABOUT2"></about-view>
      <car-view id="DEALS3"></car-view>
      <bottom-view id="CONTACT4"></bottom-view>
    </div>
    <read-more
      v-show="isreadmore"
      @closeitem="closehomeitem"
      @touchmove.prevent
      @mousewheel.prevent
    ></read-more>
    <div class="scrollbottom"></div>
    <back-top></back-top>
  </div>
</template>

<script>
import TopView from "components/navbar/TopView.vue";
import CenterView from "components/center/CenterView.vue";
import AboutView from "components/about/AboutView.vue";
import CarView from "components/car/CarView.vue";
import BottomView from "components/bottom/BottomView.vue";
import ReadMore from "./childrenComp/ReadMore.vue";
import BackTop from "./childrenComp/backTop/BackTop.vue";

export default {
  name: "App",
  components: {
    TopView,
    CenterView,
    AboutView,
    CarView,
    BottomView,
    ReadMore,
    BackTop,
  },
  data() {
    return {
      isreadmore: false,
    };
  },
  methods: {
    closehomeitem() {
      // console.log(123)
      this.isreadmore = false;
    },
    openhomeitem() {
      // console.log(123)
      this.isreadmore = true;
      document.documentElement.scrollTop = 0;
      // document.getElementById('mp4-vedio').play();
    },
    Topgoside(index) {
      // console.log(index)
      let offsetTop = document.getElementById(index).offsetTop;
      let timer = null;
      if (index == "CONTACT4") {
        document.getElementById(index).scrollIntoView();
      } else {
        timer = setInterval(() => {
          document.documentElement.scrollTop += 30;
          // document.documentElement.scrollTop  -= ispeed
          if (document.documentElement.scrollTop >= offsetTop) {
            clearTimeout(timer);
            timer = null;
            // console.log(i)
          }
        }, 10);
      }

      // i = 0
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.home-view {
  position: relative;
  background-color: #fff;
}
.scrollbottom {
  width: 100%;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.897);
}
</style>
